<template>
  <div class="footer">
    <div class="footer-in">
      <div class="foot-in-fl">
        <img
          :src="
            lang === 'en'
              ? require('@/assets/images/sotenLogo2_en.svg')
              : require('@/assets/images/sotenLogo2.png')
          "
          alt=""
          class="logo"
        />
        <p class="ft30">{{ $t('common.footer.questions') }}</p>
        <p class="ft16">{{ $t('common.footer.sendEmail') }}</p>
        <p class="ft16 mg-100">
          {{ $t('common.footer.address') }}<br />
          {{ $t('common.footer.phone') }}<br />
          {{ $t('common.footer.fax') }} <br />
          {{ $t('common.footer.web') }}<br />
          {{ $t('common.footer.fae') }}<br />
          {{ $t('common.footer.skype') }}
        </p>
        <div class="chart">
          <div class="chart-in">
            <img src="@/assets/images/index/Wechat.png" alt="" />
            <div class="hover-box">
              <img
                src="http://bepai-sotenowe.oss.bepai.net/source/on-line/%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg"
                alt=""
              />
            </div>
          </div>
          <div class="chart-in">
            <img src="@/assets/images/index/Telephone.png" alt="" @click="handleJumpWhatsapp" />
            <div class="hover-span">
              <span>177 8203 0739</span>
            </div>
          </div>
        </div>
        <div class="contact" @click="contactVisible = true">{{ $t('common.contact') }}</div>
      </div>
      <div class="foot-in-fr">
        <div class="gender" @click="gender = !gender">
          <div class="gender-in" :class="{ active: gender }">
            <span>{{ $t('common.form.mr') }}</span>
            <em></em>
          </div>
          <div class="gender-in" :class="{ active: !gender }">
            <span>{{ $t('common.form.ms') }}</span>
            <em></em>
          </div>
        </div>
        <el-form ref="form" label-width="10vw" :model="formData">
          <el-form-item :label="`*${$t('common.form.name')}:`">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item :label="`*${$t('common.form.phone')}:`">
            <el-input v-model="formData.telephone"></el-input>
          </el-form-item>
          <el-form-item :label="`*${$t('common.form.email')}:`">
            <el-input v-model="formData.email"></el-input>
          </el-form-item>
          <el-form-item :label="`*${$t('common.form.company')}:`">
            <el-input v-model="formData.company"></el-input>
          </el-form-item>
          <el-form-item :label="`*${$t('common.form.region')}:`">
            <el-input v-model="formData.country"></el-input>
          </el-form-item>
          <el-form-item :label="`${$t('common.form.vertical-market')}:`">
            <el-input v-model="formData.verticalMarket"></el-input>
          </el-form-item>
          <el-form-item :label="`${$t('common.form.howFind')}:`">
            <el-input v-model="formData.findWay"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="formData.question"
              type="textarea"
              :rows="6"
              :placeholder="`${$t('common.form.talkToMe')}`"
            ></el-input>
          </el-form-item>
        </el-form>
        <div v-loading="loading" class="submit" @click="handleSubmit">
          {{ $t('common.submit') }}
        </div>
      </div>
    </div>
    <div class="copyright">
      <p>{{ $t('common.footer.copyright') }}</p>
      <div>
        <span @click="show('shiyong')">{{ $t('common.footer.shiyong') }}</span>
        <span @click="show('privacy')">{{ $t('common.footer.privacy') }}</span>
        <span @click="show('cookie')">{{ $t('common.footer.cookie') }}</span>
      </div>
    </div>
    <footer-dialog-web v-if="visible" :type="type" :show.sync="visible"></footer-dialog-web>
    <contact-dialog-web v-if="contactVisible" :show.sync="contactVisible"></contact-dialog-web>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import FooterDialogWeb from './footer-dialog-web'
import ContactDialogWeb from './contact-dialog-web'
import * as api from '@/const/api'

export default {
  components: {
    FooterDialogWeb,
    ContactDialogWeb,
  },
  data() {
    return {
      formData: {
        name: '', // 姓名
        telephone: '', // 手机
        email: '', // 邮箱
        company: '', // 公司
        country: '',
        verticalMarket: '', // 垂直市场
        findWay: '', // how to find
        question: '',
      },
      gender: 1,
      loading: false,
      visible: false,
      contactVisible: false,
      type: '',
    }
  },
  computed: {
    ...mapState(['lang', 'isZh']),
  },
  methods: {
    async handleSubmit() {
      try {
        if (this.loading) {
          return
        }
        const flag = Object.entries(this.formData).every(([key, value]) => {
          if (!value && key !== 'question') {
            return false
          }
          return true
        })

        if (!flag) {
          throw new Error(this.$t('common.form.info'))
        }

        const params = {
          ...this.formData,
          userLang: this.lang,
          sex: this.gender ? 1 : 0,
        }
        this.loading = true
        const { code, msg } = await this.$axios.$post(api.userQuestion, params)
        if (+code !== 200) {
          throw new Error(msg || this.$t('common.form.error'))
        }

        this.$message.success(this.$t('common.form.success'))
        this.formData = {}
      } catch (err) {
        err.message && this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    show(type) {
      this.type = type
      this.visible = true
    },
    handleJumpWhatsapp() {
      if (this.isZh) {
        window.open('https://work.weixin.qq.com/ca/cawcdec2e016c3c426')
      } else {
        window.open('https://wa.me/8617782030739')
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.footer {
  .ft(28);

  display: flex;
  flex-direction: column;
  background-size: 100% 100%;
  background-image: url(@/assets/images/index/bg2.png);

  .footer-in {
    .width(1200);
    .pd(90, 0, 40, 0);

    color: #fff;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex: 1;

    .foot-in-fl {
      .ft30 {
        .ft(30);
        .width(510);
        .pd(24, 0, 12, 0);

        border-bottom: 1px solid rgba(255, 255, 255, 0.55);
        color: #0261bc;
        font-weight: bold;
      }

      .ft16 {
        .ft(16);
        .mg(15, 80, 15, 0);
      }

      .mg-100 {
        .mg(100, 0, 0, 0);
      }

      .contact {
        .width(180);
        .height(40);
        .lineH(40);
        .ft(18);

        cursor: pointer;
        font-weight: bold;
        text-align: center;
        background: #0261bc;
        border-radius: 20px;

        &:hover {
          opacity: 0.9;
        }
      }
    }

    .foot-in-fr {
      .gender {
        .ft(18);
        .mg(0, 0, 20, 190);

        display: flex;

        .gender-in {
          display: flex;
          align-items: center;
          cursor: pointer;

          &.active {
            span {
              color: #075fc4;
            }

            em {
              background-image: url(@/assets/images/index/selected-active.png);
            }
          }

          em {
            display: inline-block;
            .width(20);
            .height(20);

            background-image: url(@/assets/images/index/selected.png);
            background-size: 100% 100%;
            .mg(0, 20, 0, 4);
          }

          span {
            .mg(0, 00, 0, 0);
          }
        }
      }

      .submit {
        .width(356);
        .height(40);
        .lineH(40);
        .ft(18);

        float: right;
        background: #0261bc;
        color: #fff;
        text-align: center;
        cursor: pointer;

        &:hover {
          opacity: 0.9;
        }
      }

      :deep(.el-form) {
        .mg(10, 0, 0, 0);

        font-size: 0;

        .el-form-item__content {
          .lineH(40);
        }

        .el-form-item {
          .mg(0, 0, 20, 0);
        }

        .el-form-item__label {
          .ft(16);
          .lineH(40);

          color: #fff;
        }

        .el-input__inner {
          .width(356);
          .height(40);

          background-color: rgba(246, 247, 249, 0.3);
          border: none;
          border-radius: 0;
          color: #fff;
        }

        .el-textarea__inner {
          background-color: rgba(246, 247, 249, 0.3);
          border: none;
          border-radius: 0;
          color: #fff;
        }
      }
    }

    .chart {
      .pd(30, 0, 80, 0);

      .chart-in {
        position: relative;
        display: inline-block;
        cursor: pointer;
        .mg(0, 12, 0, 0);

        .hover-box {
          position: absolute;
          opacity: 0;
          transition: all 0.3s;
          top: 0;
          left: 50%;
          transform: translate(-50%);
          z-index: 20;

          &::after {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-left: 0.416vw solid transparent;
            border-right: 0.416vw solid transparent;
            border-top: 0.3125vw solid #fff;
            position: absolute;
            bottom: -0.3125vw;
            left: 50%;
            transform: translate(-50%);
          }
        }

        .hover-span {
          .width(0);
          .height(0);
          .ft(0);

          position: absolute;
          opacity: 0;
          transition: all 0.3s;
          top: 0;
          left: 50%;
          background-color: #fff;
          color: #0261bc;
          font-weight: bold;
          transform: translate(-50%, 0);
          text-align: center;
          border-radius: 0.3125vw;

          &::after {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-left: 0.416vw solid transparent;
            border-right: 0.416vw solid transparent;
            border-top: 0.3125vw solid #fff;
            position: absolute;
            bottom: -0.3125vw;
            left: 50%;
            transform: translate(-50%);
          }
        }

        &:hover {
          .hover-box {
            .width(128);
            .height(128);
            .top(-140);

            opacity: 1;

            img {
              .width(128);
              .height(128);

              border-radius: 4px;
            }
          }

          .hover-span {
            .width(160);
            .height(30);
            .top(-40);
            .ft(18);

            opacity: 1;

            span {
              .width(160);
              .height(30);

              border-radius: 4px;
            }
          }
        }
      }

      img {
        .width(32);
        .height(32);
        .mg(0, 0, 0, 0);
      }
    }

    .logo {
      .width(240);
      .height(64);
    }
  }

  .copyright {
    .height(70);
    .pd(0, 360, 0, 360);
    .ft(16);

    display: flex;
    color: #fff;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.3);

    p {
      flex: 1;
    }

    span {
      .mg(0, 0, 0, 30);

      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
